<template>
    <div class="login">
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" class="login-from">
            <el-form-item label="用户登录" class="dl"></el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="formLabelAlign.region"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-button type="primary" @click="getlogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import store from "../store/store"
import { login } from "../api/api";
export default {
  data() {
    return {
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
    };
  },
  methods: {
    getlogin() {
      login({
        "username":this.formLabelAlign.region,
        "password":this.formLabelAlign.type
      }).then(res => {
        if (res.status== 200) {
           console.log("登录", res);
          alert("登录成功");
          this.$store.commit("set_token",res.data.data.token);
           this.$router.push({
             name:"Home"
           });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
    .login{
    width:100%;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #409EFF;
    .login-from{
        width:400px;
        background-color: white;
        padding:30px;
        border-radius:5px;
        .dl{
            font-weight: bold;
            font-size:20px;
        }
        .el-button{
            width:100%;
        }
    }
}
</style>
